import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableWithoutFeedback, ScrollView, Image, TextInput, Modal, Alert } from 'react-native';
import { connect } from 'react-redux';
import { Colors, AppStyles } from '../../style';
import { NavigationActions, createAction } from '../../common/utils';
import { default as Images } from '../../images';
import ImagePicker from 'react-native-image-crop-picker';
import { isEmail } from '../../common/utils/RegUtil';
import RNFS from 'react-native-fs';

var screenWidth = require('Dimensions').get('window').width;
var screenHeight = require('Dimensions').get('window').height;

email = '';  //邮箱
uname = ''; //密码

@connect(({ user }) => ({ user }))
export default class CompleteInfo extends Component {

    static navigationOptions = {
        title: '完善信息'
    }

    constructor(props) {
        super(props)
        this.state = {
            gender: 0,
            modalVisible: false,
            image: {},
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <ScrollView>
                    <View style={{ flex: 1, alignItems: 'center' }}>
                        <Text style={[AppStyles.hugeTextStyle, { marginTop: 30, marginBottom: 20 }]}>让大家更好的认识您</Text>
                        <TouchableWithoutFeedback onPress={() => {
                            this.setState({
                                modalVisible: true
                            })
                        }}>
                            <Image source={this.state.image.path ? { uri: this.state.image.path } : Images.image1} style={{ width: 150, height: 150 }} />
                        </TouchableWithoutFeedback>
                        <Text style={[AppStyles.mediumTextStyle, { marginTop: 10, marginBottom: 10 }]}>上传头像</Text>
                        <TextInput style={[styles.underLine, AppStyles.hugeTextStyle, { textAlign: 'center' }]} placeholder={'昵称'}
                            onChangeText={(text) => {
                                uname = text.trim()
                            }}
                        />
                        <View style={[styles.underLine, { height: 1, backgroundColor: Colors.grey }]} />
                        <Text style={[AppStyles.hugeTextStyle, { marginTop: 10, marginBottom: 10 }]}>您的性别</Text>
                        <View style={{ flexDirection: 'row' }}>
                            <GenderItem title={'男'} value={0} check={this.state.gender == 0} onClick={(value) => this.setState({
                                gender: value
                            })} />
                            <View style={{ width: 30 }} />
                            <GenderItem title={'女'} value={1} check={this.state.gender == 1} onClick={(value) => this.setState({
                                gender: value
                            })} />
                        </View>
                        <Text style={[AppStyles.hugeTextStyle, { marginTop: 10, marginBottom: 10 }]}>您的邮箱</Text>
                        <Text style={[AppStyles.mediumTextStyle, { marginBottom: 10 }]}>邮箱仅用于发送必要消息及找回密码</Text>
                        <TextInput style={[styles.underLine, AppStyles.hugeTextStyle, { textAlign: 'center' }]} placeholder={'邮箱'}
                            onChangeText={(text) => {
                                email = text.trim()
                            }}
                        />
                        <View style={[styles.underLine, { height: 1, backgroundColor: Colors.grey }]} />
                        <View style={{ marginTop: 10, marginBottom: 10 }}>
                            <Button onClick={() => {
                                // if (this.state.image.length <= 0 || !isEmail(email) || uname.length <= 0) {
                                //     Alert.alert('请填写完整信息');
                                //     return;
                                // }
                                // this.props.dispatch(createAction('user/update')({
                                //     username: uname,
                                //     gender: this.state.gender,
                                //     email: email,
                                // }))
                                if (this.state.image.path != null) {
                                    RNFS.readFile(this.state.image.path, 'base64')
                                        .then((content) => {
                                            console.log(content)
                                            this.props.dispatch(createAction('user/updateImage')({
                                                hpicurl: content
                                            }))
                                        })
                                    // let file = {uri: this.state.image.path, type: 'multipart/form-data', name: this.props.user.userInfo.uid+'.jpg'};
                                    // this.props.dispatch(createAction('user/updateImage')({
                                    //     headpic: file
                                    // }))
                                }
                                //this.props.dispatch(NavigationActions.navigate({ routeName: 'Main' }))
                            }} />
                        </View>
                    </View>
                </ScrollView>
                <Modal transparent={true} visible={this.state.modalVisible}>
                    <View style={{ flex: 1 }}>
                        <TouchableWithoutFeedback style={{ flex: 1, }} onPress={() => {
                            this.setState({
                                modalVisible: false
                            })
                        }}>
                            <View style={{ flex: 1, }} />
                        </TouchableWithoutFeedback>
                        <View style={{
                            position: 'absolute', bottom: 0,
                            width: screenWidth, justifyContent: 'center', alignItems: 'center',
                            backgroundColor: Colors.white,
                            paddingTop: 20
                        }}>
                            <Button title='从相册获取' onClick={() => {
                                ImagePicker.openPicker({
                                    width: 300,
                                    height: 400,
                                    cropping: true
                                }).then(image => {
                                    console.log(image);
                                    this.setState({
                                        image: image,
                                        modalVisible: false,
                                    })
                                });
                            }} />
                            <View style={{ height: 5 }} />
                            <Button title='照相' onClick={() => {
                                ImagePicker.openCamera({
                                    width: 300,
                                    height: 400,
                                    cropping: true,
                                }).then(image => {
                                    console.log(image);
                                    this.setState({
                                        image: image,
                                        modalVisible: false,
                                    })
                                });
                            }} />
                            <View style={{ height: 20 }} />
                            <Button title='取消' onClick={() => {
                                this.setState({
                                    modalVisible: false
                                })
                            }} />
                            <View style={{ height: 5 }} />
                        </View>
                    </View>
                </Modal>
            </View>)
    }
}

/**
 * 按钮
 * onClick 按键事件
 * style
 * child
 * title
 */
class Button extends Component {

    constructor(props) {
        super(props)
        this.state = {
            onPressIn: false
        }
    }

    render() {
        return (
            <TouchableWithoutFeedback onPressIn={() => {
                this.setState({
                    onPressIn: true
                })
            }}
                onPressOut={() => {
                    this.setState({
                        onPressIn: false
                    }, () => {
                        this.props.onClick && this.props.onClick()
                    })
                }}
            >
                <View style={{
                    borderColor: this.state.onPressIn ? Colors.orange : Colors.black,
                    borderWidth: 1,
                    borderRadius: 30,
                    height: 60, width: screenWidth - 30,
                    justifyContent: 'center', alignItems: 'center'
                }}>
                    <Text style={[AppStyles.bigTextStyle, { color: this.state.onPressIn ? Colors.orange : Colors.black, }]}>{this.props.title || '保存'}</Text>
                </View>
            </TouchableWithoutFeedback>
        )
    }
}


/**
 * 性别选项，
 * title 显示内容
 * value 选项
 * check 是否选择
 * onclick 点击事件
 */
class GenderItem extends Component {
    render() {
        return (
            <TouchableWithoutFeedback onPress={() => {
                this.props.onClick && this.props.onClick(this.props.value)
            }}>
                <View style={{
                    width: 60, height: 60, borderRadius: 30, borderWidth: 1,
                    justifyContent: 'center', alignItems: 'center',
                    borderColor: this.props.check ? Colors.orange : Colors.black,
                }}>
                    <Text style={[AppStyles.bigTextStyle, { color: this.props.check ? Colors.orange : Colors.black, }]}>{this.props.title || '男'}</Text>
                </View>
            </TouchableWithoutFeedback>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: Colors.white
    },
    icon: {
        width: 100,
        height: 100,
        borderWidth: 1,
        borderColor: Colors.orange
    },
    gender: {
        width: 20,
        height: 20,
    },
    underLine: {
        width: screenWidth - 20,
        marginLeft: 10,
        marginRight: 10
    }
})
